<template>
    <div class="onlinePractice">
        <!-- 类型选择 -->
        <div class="filter-wrap">
            <div class="section-wrap">
                <span>类型</span>
                <ul>
                    <li @click="changeTags1(item.title)" :class="{ active1: actived1 == item.title }"  v-for="item in typeData" :key="item.title">{{item.title}}</li>
                </ul>
            </div>
            <div class="section-wrap">
                <span>岗位</span>
                <ul>
                    <li @click="changeTags2(item.title)" :class="{ active2: actived2 == item.title }"  v-for="item in jobsData" :key="item.title">{{item.title}}</li>
                </ul>
            </div>
            <div class="section-wrap">
                <span>语言</span>
                <ul>
                    <li @click="changeTags3(item.title)" :class="{ active3: actived3 == item.title }"  v-for="item in languageData" :key="item.title">{{item.title}}</li>
                </ul>
            </div>
        </div>
        <div class="practice-content">
            <div class="practice">
                <div class="practice-item" v-for="(item,index) in practiceData" :key="index">
                    <div class="itemImg">
                        <img
                            src="../../assets/img/userCenter/practice.png"
                            alt=""
                        />
                    </div>
                    <div class="itemTitle">{{item.title}}</div>
                    <div class="itemType">{{item.type}}</div>
                    <div class="itemNum">{{item.num}}</div>
                    <div class="model">
                        <div class="collection">
                            <img
                                src="../../assets/img/userCenter/collection.png"
                                alt=""
                            />
                        </div>
                        <div class="joinBtn" @click="goToPractice">参与练习</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            actived1:'全部',
            actived2:'全部',
            actived3:'全部',
            practiceData:[
                {
                    imgUrl:'../../assets/img/userCenter/practice.png',
                    title:'Python基础一阶段基础练习',
                    type:'练习类型：在线测评',
                    num:'参与人数：122',
                },
                {
                    imgUrl:'../../assets/img/userCenter/practice.png',
                    title:'Python基础一阶段基础练习',
                    type:'练习类型：在线测评',
                    num:'参与人数：122',
                },
                {
                    imgUrl:'../../assets/img/userCenter/practice.png',
                    title:'Python基础一阶段基础练习',
                    type:'练习类型：在线测评',
                    num:'参与人数：122',
                },
                {
                    imgUrl:'../../assets/img/userCenter/practice.png',
                    title:'Python基础一阶段基础练习',
                    type:'练习类型：在线测评',
                    num:'参与人数：122',
                },
                {
                    imgUrl:'../../assets/img/userCenter/practice.png',
                    title:'Python基础一阶段基础练习',
                    type:'练习类型：在线测评',
                    num:'参与人数：122',
                },
                {
                    imgUrl:'../../assets/img/userCenter/practice.png',
                    title:'Python基础一阶段基础练习',
                    type:'练习类型：在线测评',
                    num:'参与人数：122',
                },
                {
                    imgUrl:'../../assets/img/userCenter/practice.png',
                    title:'Python基础一阶段基础练习',
                    type:'练习类型：在线测评',
                    num:'参与人数：122',
                },
                {
                    imgUrl:'../../assets/img/userCenter/practice.png',
                    title:'Python基础一阶段基础练习',
                    type:'练习类型：在线测评',
                    num:'参与人数：122',
                },
                {
                    imgUrl:'../../assets/img/userCenter/practice.png',
                    title:'Python基础一阶段基础练习',
                    type:'练习类型：在线测评',
                    num:'参与人数：122',
                },
                {
                    imgUrl:'../../assets/img/userCenter/practice.png',
                    title:'Python基础一阶段基础练习',
                    type:'练习类型：在线测评',
                    num:'参与人数：122',
                },
            ],
            typeData:[
                {
                    title:'全部',
                },
                {
                    title:'普通',
                },
                {
                    title:'专项',
                },
                {
                    title:'测评',
                },
                {
                    title:'面试',
                },
                {
                    title:'wiki相关',
                },
            ],
            jobsData:[
                {
                    title:'全部',
                },
                {
                    title:'前端',
                },
                {
                    title:'UI',
                },
                {
                    title:'测评',
                },
                {
                    title:'产品',
                },
                {
                    title:'运营',
                },
                {
                    title:'数据分析',
                },
            ],
            languageData:[
                {
                    title:'全部',
                },
                {
                    title:'C＋＋',
                },
                {
                    title:'JavaScri',
                },
                {
                    title:'产品',
                },
                {
                    title:'运营',
                },
            ],
        };
    },
    components: {},
    created() {},
    mounted() {},
    methods: {
        goToPractice(){
            this.$router.push('/practiceIntroduce');
        },
        changeTags1(title){
            this.actived1 = title
        },
        changeTags2(title){
            this.actived2 = title
        },
        changeTags3(title){
            this.actived3 = title
        },
    },
};
</script>

<style lang='scss' scoped>
@import "../../assets/css/onlinePractice/onlinePractice.scss";
</style>